<template>
  <div class="detail-container">
    <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
        <span class="color-danger">客户详情信息：{{}}</span>

      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">基本信息</span>
      </div>
      <div class="table-layout">
        <el-row>
          <el-col :span="4" class="table-cell-title">客户编码</el-col>
          <el-col :span="4" class="table-cell-title">客户名称</el-col>
          <el-col :span="4" class="table-cell-title">业务类型</el-col>
          <el-col :span="4" class="table-cell-title">客户邮箱</el-col>
          <el-col :span="4" class="table-cell-title">联系方式</el-col>
          <el-col :span="4" class="table-cell-title">实名信息</el-col>
        </el-row>
        <el-row>
          <el-col :span="4" class="table-cell">{{customerInfo.customerId}}</el-col>
          <el-col :span="4" class="table-cell">{{customerInfo.customerName}}</el-col>
          <el-col v-if="isDataLoaded && businessType.length > 0"  :span="4" class="table-cell">{{getBusinessType(customerInfo.businessType) }}</el-col>
          <el-col :span="4" class="table-cell">{{customerInfo.customerEmail}}</el-col>
          <el-col :span="4" class="table-cell">{{customerInfo.contactInfo}}</el-col>
          <el-col :span="4" class="table-cell">{{customerInfo.realNameId}}</el-col>
        </el-row>
<!--        <el-row>-->
<!--          <el-col :span="4" class="table-cell-title">配送方式</el-col>-->
<!--          <el-col :span="4" class="table-cell-title">物流单号</el-col>-->
<!--          <el-col :span="4" class="table-cell-title">自动确认收货时间</el-col>-->
<!--          <el-col :span="4" class="table-cell-title">订单可得优币</el-col>-->
<!--          <el-col :span="4" class="table-cell-title">订单可得成长值</el-col>-->
<!--          <el-col :span="4" class="table-cell-title">活动信息</el-col>-->
<!--        </el-row>-->
<!--        <el-row>-->
<!--          <el-col :span="4" class="table-cell">{{}}</el-col>-->
<!--          <el-col :span="4" class="table-cell">{{}}</el-col>-->
<!--          <el-col :span="4" class="table-cell">{{}}天</el-col>-->
<!--          <el-col :span="4" class="table-cell">{{}}</el-col>-->
<!--          <el-col :span="4" class="table-cell">{{}}</el-col>-->
<!--          <el-col :span="4" class="table-cell">-->

<!--          </el-col>-->
<!--        </el-row>-->
      </div>
      <div style="margin-top: 20px">
        <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
        <span class="font-small">地址信息</span>
      </div>
      <div class="table-layout">
        <el-table :data="customerAddr" border>
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column prop="consignee" label="收货人" width="100" align="center"></el-table-column>
          <el-table-column prop="phone" label="联系电话" width="200"  align="center"></el-table-column>
          <el-table-column prop="zipcode" label="邮政编码" width="200"  align="center"></el-table-column>
          <el-table-column label="地址" width="400"  align="center">
            <template  #default="scope">
              {{ scope.row.state + ' - ' + scope.row.city + ' - ' + scope.row.district }}
            </template>
          </el-table-column>
          <el-table-column prop="streetAddress" label="详细地址" width="300"  align="center"></el-table-column>
          <el-table-column prop="storeName" label="店铺名称" width="300"  align="center"></el-table-column>
<!--          <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="120">-->
<!--            <template #default="scope">-->
<!--              <el-button link type="primary" icon="View" @click="deleteAddr(scope.row)"-->
<!--                         v-hasPermi="['system:order:remove']">删除</el-button>-->
<!--            </template>-->
<!--          </el-table-column>-->
        </el-table>
      </div>


      <div style="margin-top: 20px">
         <span slot="footer" class="dialog-footer" style="margin-left: 47% ; ">
                 <el-button @click="handleBack()">返 回</el-button>
                </span>
      </div>

    </el-card>

  </div>
</template>

<script>
import { listOrder, getOrder, delOrder, addOrder, updateOrder } from "@/api/system/order";
import { getCustomerList, getInfo} from "@/api/system/info";
import {getData,getDicts} from "@/api/system/dict/data"
import {getCustomer, listAddr} from "../../../api/system/addr";
import {getDetail} from "@/api/system/detail";
import {getMerInfo} from "../../../api/system/merinfo";
import { useDict } from '@/utils/dict'
const { payment_meth, order_status, business_type } = useDict('payment_meth', 'order_status', 'business_type');
const router = useRouter();
import { listTrace, getTrace, delTrace, addTrace, updateTrace } from "@/api/system/trace";
import ImageUpload from "@/components/ImageUpload/index.vue";
import ImagePreview from "@/components/ImagePreview/index.vue";


export default {
  name: "orderDetails",
  components: {ImagePreview, ImageUpload},

  data() {
    return {
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        customerId:null
      },
      total: null,
      customerInfo:{},
      payment:{},
      dictType:{},
      business:{},
      customerAddr:[],
      businessType:{},
      paymentMeth:{},
      isDataLoaded: false,

    }
  },
  mounted() {
    this.customerId = this.list = this.$route.query.customerId;
    this.queryParams.customerId = this.customerId;
    this.getCustomerInfo()
    this.loadDict()
    this.getCustomerAddr()

  },

  methods:{

    getCustomerAddr(){
      listAddr(this.queryParams).then(response => {
        this.total = response.total;
        this.customerAddr = response.rows;
      })
    },

    getCustomerInfo(){
      getInfo(this.customerId).then(response => {
        this.customerInfo = response.data;
        console.log('customerInfo',this.customerInfo)
      }).catch(error => {
        console.error('获取客户信息失败:', error);
      });
    },


    loadDict(){

      getDicts("business_type").then(response =>{
        this.businessType =response.data
        this.isDataLoaded = true;
        console.log(this.businessType)
      })

    },

    getBusinessType(value) {
      if (!this.businessType || this.businessType.length === 0) return '';
      const index = parseInt(value) - 1;
      return (this.businessType[index] && this.businessType[index].dictLabel) || '未知类型';
    },


    formatCurrency(value) {
      if (value == null) return '0.00'; // 处理 null 或 undefined
      return parseFloat(value).toFixed(2); // 格式化为两位小数
    },
    handleBack(){
      this.$tab.closeOpenPage(this.$route);
      this.$router.push('info')
    },


  }






}
</script>

<style scoped>
.detail-container {
  width: 90%;
  padding: 20px 20px 20px 20px;
  margin: 20px auto;
}

.operate-container {
  background: #F2F6FC;
  height: 80px;
  margin: -20px -20px 0;
  line-height: 80px;
}

.operate-button-container {
  float: right;
  margin-right: 20px
}

.table-layout {
  margin-top: 20px;
  border-left: 1px solid #DCDFE6;
  border-top: 1px solid #DCDFE6;
}

.table-cell {
  height: 60px;
  line-height: 40px;
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  font-size: 14px;
  color: #606266;
  text-align: center;
  overflow: hidden;
}

.table-cell-title {
  border-right: 1px solid #DCDFE6;
  border-bottom: 1px solid #DCDFE6;
  padding: 10px;
  background: #F2F6FC;
  text-align: center;
  font-size: 14px;
  color: #303133;
}
</style>